<html>

<head>
  <meta charset="UTF-8">
  <title>TDengineGUI</title>
  <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/element-ui/lib/index.js"></script>
  <div id="app">
    <!-- 连接列表 -->
    <el-drawer :before-close="beforeClosedrawer" title="数据库" size="380" :visible.sync="drawer" direction="ltr">
      <div v-loading="loadingLinks">
        <el-row>
          <el-button class="linkBtn" @click="addLinkDialog = true" size="small" type="primary" plain>新建连接</el-button>
        </el-row>
        <el-menu class="menu" @open="freshDB" :unique-opened="true">
          <el-submenu :index="String(index)" :key="index" v-for="(link, index) in links">
            <template slot="title">
              <span>{{link.name}}</span>
              <el-tag type="success" size="mini" v-if="link.version">{{link.version}}</el-tag>
              <div class="iconWrapper3">
                <img @click.stop="addDB(index)" class="icon1" src="./img/add.png">
                <img @click.stop="freshDB(index)" class="icon1" src="./img/fresh.png">
                <img @click.stop="deleteLink(index, link.name)" class="icon1" src="./img/delete.png">
              </div>
            </template>
            <el-menu-item :index="db.name" class="menuitem" @click="alartDB(link, db.name)" :key="db.name"
              v-for="(db, index_) in link.dbs">
              <img class="icon11" src="./img/database.png">
              {{db.name}}
              <img class="icon111" @click.stop="deleteDB(link, db.name, index)" src="./img/delete.png">
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </div>

    </el-drawer>
    <!-- 新建连接的弹窗 -->

    <el-dialog :close-on-click-modal="false" :before-close="cancelAddLink" :visible.sync="addLinkDialog" title="新建连接">
      <el-form :model="linkForm" :ref="linkForm" class="linkformstyle" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="linkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="主机" prop="host">
          <el-input v-model="linkForm.host"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input v-model="linkForm.port"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user">
          <el-input v-model="linkForm.user"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="linkForm.password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddLink" size="medium">取 消</el-button>
        <el-button type="primary" @click="confirmAddLink" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加数据库的弹窗 -->
    <el-dialog :visible.sync="addDBDialog" title="添加数据库">
      <el-form class="linkformstyle" label-width="80px" size="small">
        <el-form-item label="名称" :rules="[
          { required: true, message: '名称不能为空'}
        ]">
          <el-input v-model="addDBname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="comp" label-width="80px">
          <el-select v-model="addDBcomp" placeholder="文件压缩度">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="replica" label-width="80px">
          <el-select v-model="addDBreplica" placeholder="数据库副本数">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="keep" label-width="80px">
          <el-input-number v-model="addDBkeep" :min="3650" :max="365000" controls-position="right"></el-input-number>
        </el-form-item>
        <el-form-item label="update" label-width="80px">
          <el-switch class="addDBswitchStyle" size="small" v-model="addDBupdate">
          </el-switch>
        </el-form-item>
        <el-form-item label="quorum" label-width="80px">
          <el-select v-model="addDBquorum" placeholder="写入确认数">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="blocks" label-width="80px">
          <el-input-number v-model="addDBblocks" :min="3" :max="1000" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDBDialog = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="postaddDB" size="medium">确 定</el-button>
      </div>
    </el-dialog>

    <el-container class="main">
      <el-footer>

        <el-button class="switchBtn" @click="drawer = true" type="text" size="small">
          <img class="icon" src="./img/switch.png" />
          切换
        </el-button>
        <div class="footTextWrapper">

        </div>
        <div class="footText">当前连接:</div>
        <div class="footText greyText">{{theLink.name}}</div>
        <div class="footText">主机:</div>
        <div class="footText greyText">{{theLink.host}}</div>
        <div class="footText">端口:</div>
        <div class="footText greyText">{{theLink.port}}</div>
        <div class="footText">用户名:</div>
        <div class="footText greyText">{{theLink.user}}</div>
        <div class="footText">数据库:</div>
        <div class="footText greyText">{{theDB}}</div>
      </el-footer>
      <el-container class="mainContent">
        <el-tabs v-model="activeTab" type="border-card" class="mainTab" @tab-click="handleSwichTab">
          <el-tab-pane label="超级表" class="tablePage" name="1">
            <el-container class="tableWrapper">
              <el-aside class="mainAside" width="200px">
                <div v-loading="loadingSurperList">
                  <!-- 超级表列表 -->
                  <el-table size="mini" highlight-current-row @current-change="handleClickSurperT" :data="surperTables"
                    style="width: 100%">
                    <el-table-column label="超级表名" width="180">
                      <template slot="header" slot-scope="scope">
                        <span>超级表名</span>
                        <div class="iconWrapper">
                          <div class="iconWrapper_" @click.stop="SuperTdialog=true">
                            <img class="icon1" v-if="searchIcon" @mouseenter="searchIcon = false"
                              src="./img/search_.png">
                            <img class="icon1" v-else src="./img/search.png" @mouseleave="searchIcon = true">
                          </div>
                          <div class="iconWrapper_" @click="freshSurperTList">
                            <img class="icon1" v-if="freshIcon" @mouseenter="freshIcon = false" src="./img/fresh_.png">
                            <img class="icon1" v-else src="./img/fresh.png" @mouseleave="freshIcon = true">
                          </div>
                        </div>
                      </template>
                      <template slot-scope="scope">
                        <img class="icon1" src="./img/file.png">
                        <span class="surperTables">{{ scope.row.name }}</span>
                        <div class="iconWrapper2">
                          <!-- <img class="icon1" @click="editSurperT(scope.row.name)" src="./img/edit.png"> -->
                          <img class="icon1" @click.stop="deleteSurperT(scope.row.name)" src="./img/delete.png">
                        </div>
                      </template>

                    </el-table-column>
                  </el-table>
                  <el-dialog title="搜索超级表" :visible.sync="SuperTdialog" width="30%" :before-close="closeSuperTdialog">
                    <el-input v-model="SuperTdialogText">
                      <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button size="small" @click="closeSuperTdialog">取 消</el-button>
                      <el-button size="small" type="primary" @click="searchSurperTList">确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
              </el-aside>
              <el-main>
                <div v-loading="loadingSurperTable">
                  <!-- 超级表筛选 -->
                  <el-dialog :close-on-click-modal="false" :before-close="concelSurperTableFilter" title="筛选条件"
                    :visible.sync="surperTableFilterDialog">
                    <el-form :model="surperTableFilter" label-width="80px">
                      <el-form-item label="数据项">
                        <el-checkbox-group v-model="surperTableFilter.fields">
                          <el-row class="checkboxGroup">
                            <el-col v-for="label in this.surperTableLabelItems" :key="label" :span="8">
                              <el-checkbox class="checkbox" :label="label">{{label}}</el-checkbox>
                            </el-col>
                          </el-row>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="每页数目">
                        <el-radio-group v-model="eachPageSurperTable">
                          <el-row class="checkboxGroup2">
                            <el-radio :label="10">10</el-radio>
                            <el-radio :label="15">15</el-radio>
                            <el-radio :label="20">20</el-radio>
                          </el-row>
                        </el-radio-group>
                      </el-form-item>
                      <el-switch class="switchStyle" v-model="surperTorder" active-value="ASC" inactive-value="DESC"
                        active-text="时间正序" inactive-text="时间倒序">
                      </el-switch>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="concelSurperTableFilter" size="small">取消</el-button>
                      <el-button @click="postSurperTableFilter" size="small">设置</el-button>
                    </span>
                  </el-dialog>
                  <!-- 超级表数据 -->
                  <el-row class="surperTSearchRow">
                    <el-col :span="3" class="dataPackerLabel">时间范围: </el-col>
                    <el-col :span="13">
                      <!-- <el-form  :model="surperTableFilter" label-width="80px"> -->
                      <!-- <el-form-item label="时间范围" > -->
                      <div class="datePickerWrapper">
                        <el-date-picker @change="selectSurperData(false,true)" style="width: 100%;" size="small"
                          v-model="surperTableFilter.surperDateRange" value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                          align="right">
                        </el-date-picker>
                      </div>
                      <!-- </el-form-item> -->
                      <!-- </el-form> -->

                      <!-- <el-input v-model="surperTableFilter.surperTSearchText" class="input-with-select" size="small">
                          <el-select v-model="surperTableFilter.surperTSearchColumn" slot="prepend" placeholder="请选择">
                            <el-option v-for="(label, index) in this.surperTableLabelItems" :label="label" :value="label" :key="index"></el-option>
                          </el-select>
                          <el-button @click="searchSurperText" slot="append" icon="el-icon-search" size="small" class="surperTSearchBtn"></el-button>
                        </el-input> -->
                    </el-col>
                    <el-col :span="4" class="freshDataBtn">
                      <el-button @click="openSurperTableFilterD" size="small" style="width: 100%"
                        icon="el-icon-setting">筛选条件</el-button>
                    </el-col>
                    <el-col :span="4" class="freshDataBtn">
                      <el-button @click="selectSurperData(false, false)" size="small" style="width: 100%"
                        icon="el-icon-refresh">数据刷新</el-button>
                    </el-col>
                  </el-row>

                  <el-table size="mini" :data="surperTableData" border max-height="585" style="width: 100%">
                    <el-table-column fixed v-if="surperTableLabel[0]" :prop="surperTableLabel[0]"
                      :label="surperTableLabel[0]" width="250">
                    </el-table-column>
                    <el-table-column v-for="(data, index) in surperTableLabel.slice(1)" :key="index" :prop="data"
                      :label="data" width="180">
                    </el-table-column>
                  </el-table>
                  <!-- 超级表分页 -->
                  <div class="paginationWrapper">
                    <el-pagination :hide-on-single-page="true" :current-page.sync="currentPageSurperTable"
                      @current-change="paginationSurperChange" :page-size="eachPageSurperTable"
                      layout="prev, pager, next" :total="totalSurperTable">
                    </el-pagination>
                  </div>
                </div>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="表" class="tablePage" name="2">
            <el-container class="tableWrapper">
              <el-aside class="mainAside" width="200px">
                <div v-loading="loadingTableList">
                  <!-- 表列表 -->
                  <el-table size="mini" :data="tables" highlight-current-row @current-change="handleClickT"
                    style="width: 100%">
                    <el-table-column label="表名" width="180">
                      <template slot="header" slot-scope="scope">
                        <span>表名</span>
                        <div class="iconWrapper">
                          <div class="iconWrapper_ " @click="Tdialog=true">
                            <img class="icon1" v-if="searchIcon" @mouseenter="searchIcon = false"
                              src="./img/search_.png">
                            <img class="icon1" v-else src="./img/search.png" @mouseleave="searchIcon = true">
                          </div>
                          <div class="iconWrapper_" @click="freshTList">
                            <img class="icon1" v-if="freshIcon" @mouseenter="freshIcon = false" src="./img/fresh_.png">
                            <img class="icon1" v-else src="./img/fresh.png" @mouseleave="freshIcon = true">
                          </div>
                        </div>
                      </template>
                      <template slot-scope="scope">
                        <img class="icon1" src="./img/file.png">
                        <span class="surperTables">{{ scope.row.table_name }}</span>
                        <div class="iconWrapper2">
                          <!-- <img class="icon1" @click="editT" src="./img/edit.png"> -->
                          <img class="icon1" @click.stop="deleteT(scope.row.table_name)" src="./img/delete.png">
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-dialog title="搜索表" :visible.sync="Tdialog" width="30%" :before-close="closeTdialog">
                    <el-input v-model="TdialogText">
                      <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                    <span slot="footer" class="dialog-footer">
                      <el-button size="small" @click="closeTdialog">取 消</el-button>
                      <el-button size="small" type="primary" @click="searchTList">确 定</el-button>
                    </span>
                  </el-dialog>
                </div>
              </el-aside>
              <el-main>
                <div v-loading="loadingTable">
                  <el-dialog :close-on-click-modal="false" :before-close="concelTableFilter" title="筛选条件"
                    :visible.sync="tableFilterDialog">
                    <el-form :model="tableFilter" label-width="80px">
                      <el-form-item label="数据项">
                        <el-checkbox-group v-model="tableFilter.fields">
                          <el-row class="checkboxGroup">
                            <el-col v-for="label in this.tableLabelItems" :key="label" :span="8">
                              <el-checkbox class="checkbox" :label="label">{{label}}</el-checkbox>
                            </el-col>
                          </el-row>
                        </el-checkbox-group>
                      </el-form-item>
                      <el-form-item label="每页数目">

                        <el-radio-group v-model="eachPageTable">
                          <el-row class="checkboxGroup2">
                            <el-radio :label="10">10</el-radio>
                            <el-radio :label="15">15</el-radio>
                            <el-radio :label="20">20</el-radio>
                          </el-row>
                        </el-radio-group>
                      </el-form-item>
                      <el-switch class="switchStyle" v-model="Torder" active-value="ASC" inactive-value="DESC"
                        active-text="时间倒序" inactive-text="时间正序">
                      </el-switch>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="concelTableFilter" size="small">取消</el-button>
                      <el-button @click="postTableFilter" size="small">设置</el-button>
                    </span>
                  </el-dialog>
                  <!-- 表数据 -->
                  <el-row class="surperTSearchRow">
                    <el-col :span="3" class="dataPackerLabel">时间范围: </el-col>
                    <el-col :span="13">
                      <div class="datePickerWrapper">
                        <el-date-picker @change="selectTData(false, true)" style="width: 100%;" size="small"
                          v-model="tableFilter.dateRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                      </div>
                    </el-col>
                    <!-- <el-col :span="15">
                        <el-input v-model="tableFilter.tableSearchText" class="input-with-select" size="small">
                          <el-select v-model="tableFilter.tableSearchColumn" slot="prepend" placeholder="请选择">
                            <el-option v-for="(label, index) in this.tableLabelItems" :label="label" :value="label" :key="index"></el-option>
                          </el-select>
                          <el-button @click="searchTableText" slot="append" icon="el-icon-search" size="small" class="surperTSearchBtn"></el-button>
                        </el-input>
                      </el-col> -->
                    <el-col :span="4" class="freshDataBtn">
                      <el-button @click="openTableFilterD" size="small" style="width: 100%" icon="el-icon-setting">筛选条件
                      </el-button>
                    </el-col>
                    <el-col :span="4" class="freshDataBtn">
                      <el-button @click="selectTData(false, false)" size="small" style="width: 100%"
                        icon="el-icon-refresh">数据刷新</el-button>
                    </el-col>
                  </el-row>
                  <el-table size="mini" :data="tableData" border max-height="585" style="width: 100%;">
                    <el-table-column fixed v-if="tableLabel[0]" :prop="tableLabel[0]" :label="tableLabel[0]"
                      width="250">
                    </el-table-column>
                    <el-table-column v-for="(data, index) in tableLabel.slice(1)" :key="index" :prop="data"
                      :label="data">
                    </el-table-column>
                  </el-table>
                  <!-- 表分页 -->
                  <div class="paginationWrapper">
                    <el-pagination @current-change="paginationChange" :hide-on-single-page="true"
                      :current-page.sync="currentPageTable" :page-size="eachPageTable" layout="prev, pager, next"
                      :total="totalTable">
                    </el-pagination>
                  </div>
                </div>
              </el-main>
            </el-container>
          </el-tab-pane>
          <el-tab-pane label="控制台" name="3">
            <div class="consoleWrapper">
              <el-input placeholder="请输入内容" v-model="consoleInput">
                <template slot="prepend">SQL:</template>
                <el-button slot="append" icon="el-icon-s-promotion" @click="sendSQL"></el-button>
              </el-input>
              <div class="resultPlace">
                <!-- <el-input :rows='1000' type="textarea" placeholder="运行结果" v-model="consoleResult" :disabled="true"></el-input> -->
                <!-- <div style="height:100%;overflow-y:auto" class="resultPlaceTitle">{{consoleResult}}</div> -->
                <el-table :data="consoleResult" size="mini" border max-height="800" style="width: 100%;">
                  <!-- <el-table-column v-for="col in consoleCols" :prop="col.prop" :fixed="col.fixed" :label="col.label"
                    :width="col.width">
                  </el-table-column> -->
                  <el-table-column fixed v-if="consoleResultLabel[0]" :prop="consoleResultLabel[0]"
                    :label="consoleResultLabel[0]" width="250">
                  </el-table-column>
                  <el-table-column v-for="(data, index) in consoleResultLabel.slice(1)" :key="index" :prop="data"
                    :label="data">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="当前数据库属性" name="4">
            <p v-html='dbInfo'></p>
          </el-tab-pane>
        </el-tabs>

      </el-container>

    </el-container>

  </div>
  <script>
    require('./index.js')
  </script>
</body>

</html>